<!DOCTYPE html>
<html lang="en">
<head>
    <title>bootstrap table</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>


        <div class="container">
            <h2>Default Table</h2>         
            <table class="table">
              <thead>
                <tr>
                  <th>First name</th>
                  <th>Last name</th>
                  <th>Age</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Jon</td>
                  <td>Doe</td>
                  <td>21</td>
                </tr>
                <tr>
                  <td>Jon</td>
                  <td>Smith</td>
                  <td>22</td>
                </tr>
              </tbody>
            </table>
          </div>

        <div class="container">
            <h2>Bordered Table</h2>         
            <table class="table-bordered" style="width:100%">
              <thead>
                <tr>
                  <th>First name</th>
                  <th>Last name</th>
                  <th>Age</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Jon</td>
                  <td>Doe</td>
                  <td>21</td>
                </tr>
                <tr>
                  <td>Jon</td>
                  <td>Smith</td>
                  <td>22</td>
                </tr>
              </tbody>
            </table>
          </div>


          <div class="container">
            <h2>Bordered Table</h2>         
            <table class="table-striped" style="width:100%">
              <thead>
                <tr>
                  <th>First name</th>
                  <th>Last name</th>
                  <th>Age</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Jon</td>
                  <td>Doe</td>
                  <td>21</td>
                </tr>
                <tr>
                  <td>Jon</td>
                  <td>Smith</td>
                  <td>22</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="container">
            <h2>Contextual Classes</h2>
            <table class="table">
              <thead>
                <tr>
                  <th>Indication</th>
                  <th>Name</th>
                  <th>Age</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Default</td>
                  <td>Jon Doe</td>
                  <td>22</td>
                </tr>      
                <tr class="success">
                  <td>Success</td>
                  <td>Jon Doe</td>
                  <td>24</td>
                </tr>
                <tr class="danger">
                  <td>Danger</td>
                  <td>Jon Smith</td>
                  <td>20</td>
                </tr>
                <tr class="info">
                  <td>Info</td>
                  <td>Jon Edwards</td>
                  <td>29</td>
                </tr>
                <tr class="warning">
                  <td>Warning</td>
                  <td>Jon Doe</td>
                  <td>25</td>
                </tr>
                <tr class="active">
                  <td>Active</td>
                  <td>Jon Doe</td>
                  <td>27</td>
                </tr>
              </tbody>
            </table>
          </div>

          <table class="table">
            <thead class="thead-dark">
              <tr>
                <th scope="col">Firstname</th>
                <th scope="col">Lastname</th>
                <th scope="col">Age</th>
              </tr>
            </thead>
             <tbody>
                <tr>
                  <td>Jon</td>
                  <td>Doe</td>
                  <td>21</td>
                </tr>
                <tr>
                  <td>Jon</td>
                  <td>Smith</td>
                  <td>22</td>
                </tr>
              </tbody>
          </table>

          <body>
            <div class="container">
              <h2>Bordered Table</h2>         
              <table class="table-bordered" style="width:100%">
                <thead>
                  <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Age</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Jon</td>
                    <td>Doe</td>
                    <td>21</td>
                  </tr>
                  <tr>
                    <td>Jon</td>
                    <td>Smith</td>
                    <td>22</td>
                  </tr>
                </tbody>
              </table>
            </div>
            </body>

</body>
</html>